<template>
  <div class="select-content content">
    <div class="search">
      <el-input type="text" v-model="searchText" clearable placeholder="请输入内容，可按Enter搜索" @keyup.enter.native="searchKs"/>
      <button class="search-btn button" @click="searchKs">搜索</button>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item, index) in ksshow" :key="index" @click="chooseKs(item.department)">
          <span>{{item.department}}</span>
          <i v-if="item.isChoosed" class="el-icon-circle-check"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    data: Array,
    curr: String
  },
  data(){
    return {
      searchText:"",
      ksList: []
    }
  },
  computed:{
    ksshow(){
      let searchkey = this.searchText.trim()
      if(searchkey){
        return this.ksList.filter(v => v.department.indexOf(searchkey) != -1)
      }
      return this.ksList

    }
  },
  mounted(){
    this.ksList = []
    this.data.forEach(elm => {
      let isChoosed = false
      if(elm.address == this.curr){
        isChoosed = true
      }
      this.ksList.push({department:elm.address,isChoosed: isChoosed})
    });
  },
  methods:{
    searchKs(){
      
    },
    chooseKs(department){
      this.$emit("onselect",department)
    }
  },
}
</script>

<style lang="less">
  .select-content{
    padding: 0 20px 10px;
    overflow: hidden;
    height: 100%;
    h3{
      text-align: center;
    }
    .search{
      .el-input{
        width: calc(~'90% - 30px');
      }
    }
    .list{
      overflow-y: scroll;
      height: 430px;
      li{
        font-size: 16px;
        padding: 5px;
        border: 1px solid #EBEEF5;
        margin-bottom: -1px;
        margin-right: 2px;
        position: relative;
      }
    }
    .el-input .el-input__inner{
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
    }
    button {
      margin: 5px 5px 5px 0;
      border: 1px solid #ccc;
      padding: 5px 10px;
      border-radius: 5px;
      vertical-align: middle;
      height: 30px;
    }
    .el-icon-circle-check{
      color: green;
      font-size: 22px;
      position: absolute;
      right: 14%;
      top: 18%;
    }
    ::-webkit-scrollbar{
      width: 6px;
      height: 5px;
    }
    ::-webkit-scrollbar-thumb{
      background: #ccc;
      border-radius: 5px;
    }
  }
</style>